<template>
  <div class="client-wrap" ref="clientWrap" v-resize="resize">
    <div class="router-wrap" ref="routerWrap">
      <slot>11111111</slot>
    </div>
  </div>
</template>

<script>
import resize from '@/directives/resize'
export default {
  directives: { resize },
  methods: {
    resize() {
      console.log(11111111111)
      const elem = this.$refs.clientWrap
      const width = elem.offsetWidth
      const height = elem.offsetHeight
      this.$refs.routerWrap.style.transform = `scale(${width / 1920},${height / 1080})`
      elem.style.innerHeight = (1080 * width) / 1920 + 'px'
    },
  },
}
</script>

<style lang="scss" scoped>
.client-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .router-wrap {
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    transform-origin: 0% 0%;
  }
}
</style>

